<template>
	<nt-container>
		<view class="container">
			<view class="select-box">
				<view class="select" @tap="showWwc = true">
					<view class="label">未完成订单</view>
					<view class="value">
						<u--input v-model="wwcTitle" readonly placeholder="请选择订单"></u--input>
						<text class="iconfont">&#xe6bb;</text>
					</view>
				</view>
				<view class="select" @tap="showYwc = true">
					<view class="label">已完成订单</view>
					<view class="value">
						<u--input v-model="ywcTitle" readonly placeholder="请选择订单"></u--input>
						<text class="iconfont">&#xe6bb;</text>
					</view>
				</view>
			</view>
			<view class="card" v-for="(it, index) in purchase" :key="index">
				<view class="card-item">
					<view class="label">配件名称</view>
					<view class="value">
						<u-input placeholder="请输入配件名称" v-model="it.content"></u-input>
					</view>
					<view class="del" @tap="delTpl(index)">删除</view>
				</view>
				<view class="card-item">
					<view class="label">数量</view>
					<view class="value">
						<u-number-box v-model="it.number"></u-number-box>
					</view>
				</view>
				<view class="card-item">
					<view class="label">单价</view>
					<view class="value">
						<u-input placeholder="请输入单价" v-model="it.price"></u-input>
					</view>
				</view>
			</view>
			<view class="count-price">总价: <text>{{total}}</text></view>
			<view class="add-btn" @tap="addTpl">添加配件</view>
			<view class="form">
				<!-- <view class="form-item vertical">
					<view class="form-item__label">备注：</view>
					<view class="form-item__content">
						<u--textarea 
							v-model="formData.remarks" 
							placeholder="请填写备注" 
							height="150" 
							autoHeight
							maxlength="-1"
							:confirmType="null"
							:autoHeight="true"
						></u--textarea>
					</view>
				</view> -->
				<view class="form-item vertical">
					<view class="form-item__label">上传图片：</view>
					<view class="form-item__content">
						<nt-upload :key="uploadKey" @success="successUpload" :images="previewImage"></nt-upload>
					</view>
				</view>
			</view>
			<nt-button text="确认" @tap="submit"></nt-button>
		</view>
		<u-picker :show="showWwc" :columns="[wwcList]" keyName="text" @cancel="showWwc = false" @confirm="confirmWwc"
			@close="showWwc = false" closeOnClickOverlay></u-picker>
		<u-picker :show="showYwc" :columns="[ywcList]" keyName="text" @cancel="showYwc = false" @confirm="confirmYwc"
			@close="showYwc = false" closeOnClickOverlay></u-picker>
	</nt-container>
</template>

<script>
	import {
		getStoreOrderPurchaseStatusPaginate,
		postStoreOrderPurchaseStatus,
		getOrderDetail
	} from "@/api"
	const tpl = {
		type: "",
		content: '',
		price: '',
		number: 1
	}
	export default {
		watch: {
			async realorderId(n) {
				const {
					code,
					data
				} = await getOrderDetail(n)
				if (code == 1) {
					const purchase = data.partscompany.filter(o => o.is_new === 1).map(o => ({
						content: o.content,
						number: o.number,
						price: o.price,
						type: ''
					}))
					const previewImage = data.purchase_images
					this.purchase = purchase.length > 0 ? purchase : this.oldPurchase
					this.previewImage = previewImage.length > 0 ? previewImage : this.oldPreviewImage
					this.uploadKey++
					this.$forceUpdate()
				}
			}
		},
		data() {
			return {
				formData: {},
				wwcList: [],
				ywcList: [],
				showWwc: false,
				showYwc: false,
				wwcTitle: '',
				ywcTitle: '',
				purchase: [{
					type: "",
					content: '',
					price: '',
					number: 1
				}],
				oldPurchase: [],
				previewImage: [],
				oldPreviewImage: [],
				purchaseImages: [],
				realorderId: '',
				uploadKey: Math.random()
			}
		},
		computed: {
			total() {
				return this.purchase.reduce((acc, it) => {
					if (!isNaN(Number(it.price))) {
						acc += (Number(it.price) * it.number)
					}
					return acc
				}, 0)
			}
		},
		onLoad() {
			this.getOrderList();
			this.oldPurchase = JSON.parse(JSON.stringify(this.purchase))
			this.oldPreviewImage = JSON.parse(JSON.stringify(this.previewImage))
		},
		methods: {
			getOrderList() {
				getStoreOrderPurchaseStatusPaginate().then(res => {
					const {
						data,
						code
					} = res
					if (code === 1) {
						this.wwcList = data.wwc_list
						this.ywcList = data.ywc_list
					}
				})
			},
			confirmYwc(e) {
				this.ywcTitle = e.value[0].text
				this.showYwc = false
				this.wwcTitle = ''
				this.realorderId = e.value[0].value
			},
			confirmWwc(e) {
				this.wwcTitle = e.value[0].text
				this.showWwc = false
				this.ywcTitle = ''
				this.realorderId = e.value[0].value
			},
			successUpload(e) {
				this.purchaseImages = e
			},
			addTpl() {
				this.$set(this.purchase, this.purchase.length, JSON.parse(JSON.stringify(tpl)))
			},
			delTpl(index) {
				this.purchase.splice(index, 1)
			},
			submit() {
				const isSome = this.purchase.some(item => item.price === '' || isNaN(Number(item.price)))
				const isContentSome = this.purchase.some(item => item.content === '')
				if (!this.realorderId) return this.toast('请选择订单')
				if (isSome) return this.toast("请输入正确的价格")
				if (isContentSome) return this.toast('请输入配件名称')
				if (this.purchaseImages.length === 0) return this.toast("请上传图片")
				console.log({
					purchase_images: this.purchaseImages.map(item => item.url),
					purchase: this.purchase,
					realorder_id: this.realorderId
				})
				postStoreOrderPurchaseStatus({
					purchase_images: this.purchaseImages.map(item => item.url),
					purchase: this.purchase,
					realorder_id: this.realorderId
				}).then(res => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.toast('添加成功')
						setTimeout(async () => {
							await this.back()
							uni.$emit('getPurchaseList')
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.select-box {
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.select {
		display: flex;
		align-items: center;
		padding: 20rpx 0;

		.label {
			font-size: 28rpx;
			color: #333;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.value {
			position: relative;
			flex: 1;

			&::after {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				top: 0;
			}

			.iconfont {
				position: absolute;
				right: 20rpx;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
			}
		}
	}

	.card {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		background: #fff;

		&-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			position: relative;

			.label {
				width: 140rpx;
				font-size: 28rpx;
				color: #333;
				flex-shrink: 0;
			}

			.value {
				flex: 1;

				/deep/.u-input {
					width: 80%;
					border: none !important
				}
			}

			.del {
				padding: 10rpx 20rpx;
				font-size: 26rpx;
				color: #fff;
				background: #f00;
				border-radius: 6rpx;
				text-align: center;
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.card-item+.card-item {
			border-top: 1rpx solid #f5f5f5;
		}
	}

	.count-price {
		padding: 20rpx;
		box-sizing: border-box;
		text-align: right;
		font-size: 30rpx;
		color: #333;

		text {
			color: #f00;
		}
	}

	.add-btn {
		background: #01a001;
		padding: 20rpx 20rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		border-radius: 6rpx;
		width: 200rpx;
		margin: 0 auto 20rpx;
	}

	.form {
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		&-container {
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
		}

		&-item {
			display: flex;

			&.vertical {
				flex-direction: column;
			}

			&.horizontal {
				flex-direction: row;
				align-items: center;
			}

			&__label {
				font-size: 26rpx;
				color: #333;
				height: 80rpx;
				line-height: 80rpx;
				width: 140rpx;
				font-weight: bold;
			}

			&__content {
				flex: 1;
				position: relative;

				.iconfont {
					position: absolute;
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
				}

				/deep/ .u-textarea {
					min-height: 225rpx;
					border-radius: 20rpx;
					padding: 10rpx;
					box-sizing: border-box;

					.uni-textarea-textarea {
						height: 100%
					}

					.uni-textarea-wrapper {
						min-height: 100%;
					}

					&.u-border {
						border-width: 1rpx;
						border-style: solid;
						border-color: #F8D4B9 !important;
					}
				}

				/deep/ .u-input {
					box-sizing: border-box;

				}
			}
		}
	}
</style>